<template>
    <div id="manageUser">
        <div class="header">
            <el-input v-model="condition" placeholder="请填写关键字查找" size="mini" clearable
                style="width:250px;margin-left:10px;"></el-input>
            <el-button type="primary" size="mini" @click="refresh" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" size="mini" @click="onlyIsFreeze = !onlyIsFreeze" width="100">
                {{ !onlyIsFreeze ? '显示冻结用户' : '显示全部' }}
            </el-button>
        </div>
        <div class="main">
            <el-table :data="userList" border stripe>
                <el-table-column prop="id" label="编号" min-width="200" align="center"></el-table-column>
                <el-table-column prop="userName" label="用户名" width="150" align="center"></el-table-column>
                <el-table-column prop="phone" label="用户手机号" width="200" align="center"></el-table-column>
                <el-table-column prop="password" label="用户密码" width="100" align="center"></el-table-column>
                <el-table-column prop="email" label="用户邮箱" width="100" align="center"></el-table-column>
                <el-table-column prop="gender" label="性别" width="100" align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ genderDict.filter(item => item.value == scope.row.gender)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="isFreeze" label="状态" width="100" align="center">
                    <template slot-scope="scope">
                        <span class="main-table-span"
                            :style="!scope.row.isFreeze ? 'background-color: green;' : 'background-color: red;'">
                            {{ dict.filter(item => item.value == scope.row.isFreeze)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="200" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" :disabled="scope.row.isFreeze != 1"
                            @click="FreezeUser(scope.row, false)">解除冻结</el-button>
                        <el-button type="danger" size="mini" :disabled="scope.row.isFreeze != 0"
                            @click="FreezeUser(scope.row, true)">冻结账户</el-button>
                    </template>
                </el-table-column>

            </el-table>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'manageUser',
        data() {
            return {
                condition: '',
                userList: [],
                onlyIsFreeze: false,
                dict: [
                    {
                        value: false,
                        label: '正常'
                    },
                    {
                        value: true,
                        label: '冻结'
                    }
                ],
                genderDict: [
                    {
                        value: 0,
                        label: '女'
                    },
                    {
                        value: 1,
                        label: '男'
                    },
                    {
                        value: 2,
                        label: '未知'
                    },
                ]
            }
        },
        watch: {
            onlyIsFreeze() {
                this.refresh()
            }
        },
        methods: {
            refresh() {
                let loading = this.$loading({
                    text: '加载数据中',
                    target: '#manageUser'
                })
                this.$GET('/user/getAllUser', { condition: this.condition, onlyIsFreeze: this.onlyIsFreeze }).then((res) => {
                    this.userList = res.data.data
                    this.$message({
                        duration: 1000,
                        type: 'success',
                        message: '获取用户列表成功'
                    })
                }).catch(_ => {
                    debugger
                }).finally(_ => {
                    setTimeout(() => {
                        loading.close()
                    }, 200)
                })
            },
            FreezeUser(row, state) {
                let loading = this.$loading({
                    text: '加载数据中',
                    target: '#manageUser'
                })
                this.$PUT('/user/editUser', { model: row, columns: { isFreeze: state } })
                    .then(res => {
                        this.$message({
                            duration: 1000,
                            type: 'success',
                            message: res.data.msg
                        })
                        this.getAdopter()
                    }).catch(_ => { }).finally(_ => {
                        setTimeout(() => {
                            loading.close()
                        }, 200)
                    }).finally(_ => {
                        this.refresh()
                    })
            }
        },
        mounted() {
            this.refresh()
        }
    }
</script>

<style scoped lang="less">
    #manageUser {
        width: 100%;
        height: 100%;
        display: flex;

        .header {
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;

            button {
                margin: 10px;
            }
        }

        .main-table-span {
            display: inline-block;
            width: 60px;
            height: 50px;
            line-height: 50px;
            border: 1px solid var(--main-color-border);
            border-radius: 25%;
            background-color: var(--main-bg-color);
            color: rgb(255, 255, 255);
        }

        .main-table-img {
            width: 80px;
            height: 80px;
            object-position: center;
            object-fit: cover;
        }
    }
</style>